import React ,{useState,useEffect} from 'react'

const Register = (props) => {
    const [msg,setMsg] = useState('');
    const [mail, setMail] = useState('');
    const [psd, setPsd] = useState('');
    const [psd1, setPsd1] = useState('');
    const [name, setName] = useState('');
    const[icon ,setIcon] = useState('请选择头像');
    const[file,setFile] = useState(null);

    useEffect(() => {
        let isLogin = async () => {
            let resp = await fetch('/api/Index/hello');
            if (resp.ok) {
                let user = await resp.json();
                window.setUser(user);
                document.getElementsByTagName('header')[0].style.display = 'block';
                document.body.style.backgroundImage = "url('')";
                props.history.push('/');
            }
            
        }
        isLogin();
        return () => {

        };
    }, []);

    const onclick=async()=>{
        setMsg('');
        if(mail==''){
            setMsg("请输入邮箱账号");
            return;
        }
        if(psd==''){
            setMsg("请输入密码");
            return;
        }
        if(psd!==psd1){
            setMsg("两次密码输入不一致");
            return;
        }
        if(name==''){
            setMsg("请输入昵称");
            return;
        }
        if(file==null){
            setMsg("请选择头像");
            return;
        }
        let data = new FormData();
        data.append('name',name);
        data.append('psd',psd);
        data.append('mail',mail);
        data.append('image',file,icon)
        let resp = await fetch('/api/index/register',{
            method:'POST',
            body:data
        });
        if(resp.ok){
            alert('注册成功');
            window.location.href='/';
        }else{
            setMsg(await resp.text());
        }
    }
    const selectIcon=(e)=>{
        setIcon(e.target.files[0].name);
        setFile(e.target.files[0]);
    }
    return (
        <div className='bg'>
            {msg}
            <input value={mail} type="email" id="inputEmail" className="form-control login-input1" placeholder="请输入邮箱" required="" onChange={e => { setMail(e.target.value); }} autoFocus />
            <input value={psd} type="password"  className="form-control login-input2" placeholder="请输入密码" required="" onChange={e => { setPsd(e.target.value); }}></input>
            <input value={psd1} type="password"  className="form-control login-input2" placeholder="请确认密码" required="" onChange={e => { setPsd1(e.target.value); }}></input>
            <input value={name} type="text"  className="form-control login-input2" placeholder="请输入昵称" required="" onChange={e => { setName(e.target.value); }}></input>
            <label htmlFor='icon' className='form-control login-input3'>{icon}</label>
            <input type='file' accept='image/*' onChange={selectIcon} id='icon' placeholder="" style={{widh:0,height:0,display:'none'}}/>
            <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={onclick}>注册</button>
        </div>
    )
}

export default Register
